<template>
  <div class="container ">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }" :modules="modules" :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :key="String(index)">
        <div class="headBox">
          <video class="video" :poster="item.pic_url" :src="item.video_url" autoplay muted playsinline="1" webkit-playsinline="1" v-if="item.video_url"></video>
          <div class="bg" :style="{ backgroundImage: `url(${item.pic_url})` }" v-else></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{ item.title }}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{ item.brief }}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <div class="button-container animate__animated animate__zoomIn  ">
              <button class="glow-button" style="--btn-color: #ffffff;" @click="scrollToNext">
                了解更多>>

              </button>
            </div>

          </div>
        </div>
      </swiper-slide>
    </swiper>
    <swiper :loop="true">
      <swiper-slide v-for="(item, index) in data.middleSlide" :key="String(index)">
        <div class="location">
          <div class="bg2" :style="{ backgroundImage: `url(${item.pic_url})` }"></div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="lifeBox" v-slide>
      <h2 class="title col-2 t-c">乐享生活</h2>
      <el-row :gutter="24">
        <el-col :span="8" :xs="24" v-for="item in data.newNewsList">

          <NuxtLink :to="{path: `/article/${item.article_id}`}" class="item cursor" v-slide>
            <div class="imgBox">
              <img class="img" :src="item.image_url" />
            </div>

            <div class="bottom b-f">
              <div class="txt1  t-c">{{item.title}}</div>
              <div class="txt2  t-c"> {{item.brief}}</div>
            </div>
          </NuxtLink>

        </el-col>

      </el-row>
    </div>

    <swiper :loop="true" v-slide>
      <swiper-slide v-for="(item, index) in data.bottomSlide" :key="String(index)">
        <div class="bottomBox flex-y flex-y-center flex-x-center col-f" :style="{ backgroundImage: `url(${item.pic_url})` }">
          <div class="txt1 ">{{ item.title }}</div>
          <div class="txt2 t-c">{{ item.brief }}
          </div>
        </div>
      </swiper-slide>
    </swiper>

  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Autoplay} from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
const data = await serverRequest.get('home/area');
// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}

/**
 * 头部设置
 */
const keywords = computed(() => {
  const topSlide = data.topSlide
  const newKeywords =  data.topSlide.map(item => item.title).join(',')
  return newKeywords
});

const description = computed(() => {
  const topSlide = data.topSlide
  const newDescription =  data.topSlide.map(item => item.brief).join(',')
  return newDescription
});
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk}-区位` : '红河大成房地产';
  },
  meta: [
    { name: 'keyword', content: keywords },
    { name: 'description', content:description }
  ]
})
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>